<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>jQuery点击左侧菜单页面滚动代码</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: #ddd;
        }
        
        ul {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .box {
            margin: 0 auto;
            width: 1200px;
            position: relative;
        }
        
        .fl_l {
            width: 200px;
            float: left;
            border: 1px solid #f4f4f4;
            background: #fff;
        }
        
        .fl_l li a {
            border-bottom: 1px solid #eee;
            text-align: center;
            display: block;
            color: #333;
            font-size: 14px;
            line-height: 60px;
        }
        
        .fl_l li a:hover {
            background: #f60;
            color: #fff;
        }
        
        .fl_r {
            float: right;
            width: 960px;
            position: relative;
        }
        
        .fl_r li {
            width: 960px;
            height: 400px;
            margin-bottom: 30px;
            background: #fff;
            font-size: 20px;
            text-align: center;
            padding-top: 20px;
            position: absolute;
            display: none;
        }
        
        .fl_r li.active {
            display: block;
        }
        
        .fl_r li:last-child input {
            width: 100px;
        }
        
        table {
            width: 800px;
            margin: 0 auto;
        }
        
        .btn-func {
            width: 650px;
            left: 50%;
            margin-left: -325px;
            position: absolute;
            bottom: 50px;
        }
        
        .btn-pri {
            float: left;
        }
        
        .btn-next {
            float: right;
        }
        
        .btn-pri1 {
            float: left;
        }
        
        .btn-next1 {
            float: right;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="fl_l">
            <li index=0 class="active"><a href="##">主页</a></li>
            <li index=1><a href="##">归档</a></li>
            <li index=2 class="create"><a href="##">新建任务</a></li>
        </ul>
        <ul class="fl_r">
            <li class="active" id="active">
                <table class="table1">
                    <thead>
                        <tr>
                            <th>任务名字</th>
                            <th>截止日期</th>
                            <th>重要程度</th>
                            <th>完成情况</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody class="para1">

                    </tbody>
                </table>
                <div class="no-message">没有数据</div>
                <div class="btn-func">
                    <button class="btn-pri">上一页</button>
                    <button class="btn-next">下一页</button>
                </div>
            </li>
            <li>
                <table class="table2">
                    <thead>
                        <tr>
                            <th>任务名字</th>
                            <th>截止日期</th>
                            <th>重要程度</th>
                            <th>完成情况</th>
                        </tr>
                    </thead>
                    <tbody class="para2">

                    </tbody>
                </table>
                <div class="no-message1">没有数据</div>
                <div class="btn-func">
                    <button class="btn-pri1">上一页</button>
                    <button class="btn-next1">下一页</button>
                </div>
            </li>
            <li>
                <label for="task-name">任务名字:</label><input type="text" name="task-name" class="task-name">
                <label for="task-year">截止日期:</label><input type="text" name="task-year" class="task-year">
                <label for="task-importance">重要程度:</label><input type="text" name="task-importance" class="task-importance">
                <!--<label for="task-perform">完成情况:</label><input type="text" name="task-perform" class="task-perform">-->
                <button class="btn-add">添加</button>
            </li>


        </ul>
    </div>
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function() {
            var flLs = $(".fl_l li");
            var flRs = $(".fl_r li");
            for (var i = 0; i < flLs.length; i++) {
                $(flLs[i]).on("click", function(e) {

                    var index = $(this).attr("index");
                    for (var j = 0; j < flRs.length; j++) {
                        // console.log(flRs);
                        flRs.eq(j).removeClass("active")
                    }
                    flRs.eq(index).addClass("active")

                    // console.log(index);
                    // $('body, html').animate({
                    //     scrollTop: $('.fl_r li').eq(index).offset().top
                    // }, 500);

                })
            }
            var tasks = [];
            var para1 = $(".para1")
            var para2 = $(".para2")

            var totalPage = 1;
            var page = 0;
            pageCount = 5;

            var showList = function(tasks) {
                para1.empty();
                for (var i = 0; i < tasks.length; i++) {
                    // console.log(tasks[i]);
                    // console.log(tasks[i].perform);
                    var tr = "<tr _id=" +
                        tasks[i]._id + "><td>" + tasks[i].name + "</td><td>" + tasks[i].year + "</td><td>" + tasks[i].importance + "</td><td>" + tasks[i].perform + "</td><td>" + "<button class='btn-del'>删除</button><button class='btn-rev'>修改</button>" + "</td></tr>";
                    var jTr = $(tr);
                    para1.append(jTr);
                }


                var btnDel = para1.find(".btn-del");
                btnDel.on("click", function(e) {
                    var btnDel = $(this);
                    var id = btnDel.parents("tr").attr("_id");
                    // console.log(id);
                    $.ajax({
                        url: "/del",
                        method: "get",
                        data: {
                            id: id,
                            page: page,
                            pageCount: pageCount
                        },
                        success: function(data) {
                            showList(data.data);
                        }
                    })
                });
                var btnRev = para1.find(".btn-rev");
                btnRev.on("click", function(e) {
                    var btnRev = $(this);
                    // console.log(btnRev.parents("tr").children().eq(3).text());
                    // console.log($(btnRev.parents("tr").children().eq(3)));
                    var input = "<input type='text' width='167.2' id='temp' size='20'value=" + $(btnRev.parents("tr").children().eq(3)).text() + " >";
                    console.log(input);
                    $(btnRev.parents("tr").children().eq(3)).text("");
                    $(btnRev.parents("tr").children().eq(3)).append(input);
                    $("input").focus();
                    $("input").blur(function() {
                        $(btnRev.parents("tr").children().eq(3)).text($("#temp").val());
                        // $("#temp").remove();
                    });
                    var para1 = $("#temp").val();
                    var perform = $(btnRev.parents("tr").children().eq(3)).text();
                    console.log(para1);
                    // $.ajax({
                    //     url: "/changePerform",
                    //     method: "get",
                    //     data: {
                    //         perform: perform,
                    //         page: page,
                    //         pageCount: pageCount
                    //     },
                    //     success: function(data) {
                    //         showData(data.data);
                    //     }
                    // })
                })
            }

            var showList2 = function(tasks) {
                para2.empty();
                for (var i = 0; i < tasks.length; i++) {
                    // console.log(tasks[i]);
                    var tr = "<tr _id=" +
                        tasks[i]._id + "><td>" + tasks[i].name + "</td><td>" + tasks[i].year + "</td><td>" + tasks[i].importance + "</td><td>" + tasks[i].perform + "</td><td>" + "</td></tr>";
                    var jTr = $(tr);
                    para2.append(jTr);
                }
            }

            var showData = function(data) {
                if (data.status != 0) {
                    alert("数据库出错");
                } else {
                    totalPage = data.totalPage;
                    page = data.page;
                    if (data.length <= 0) {
                        var noMessage = $(".no-message");
                        noMessage.show();
                    } else {
                        var noMessage = $(".no-message");
                        noMessage.hide();
                        showList(data.data);
                    }
                }
            }
            var showData2 = function(data) {
                if (data.status != 0) {
                    alert("数据库出错");
                } else {
                    totalPage = data.totalPage;
                    page = data.page;
                    if (data.length <= 0) {
                        var noMessage = $(".no-message1");
                        noMessage.show();
                    } else {
                        var noMessage = $(".no-message1");
                        noMessage.hide();
                        showList2(data.data);
                    }
                }
            }

            var getTodolistData = function() {
                $.ajax({
                    url: "/getTodolistData",
                    method: "get",
                    data: {
                        page: page,
                        pageCount: pageCount
                    },
                    success: function(data) {
                        // page = data.page;
                        // pageCount = data.pageCount;
                        // tasks = data.data;
                        showData(data);
                    }
                })
            }
            getTodolistData();

            var finishTodolistData = function() {
                $.ajax({
                    url: "/finish",
                    method: "get",
                    data: {
                        page: page,
                        pageCount: pageCount
                    },
                    success: function(data) {
                        // tasks = data;
                        // showList2(tasks);
                        showData2(data);
                    }
                })
            }
            finishTodolistData();


            var btnAdd = $(".btn-add");
            btnAdd.on("click", function(e) {
                // window.location.hash = "#active";
                e.preventDefault();
                var newTasks = {
                    name: $(".task-name").val(),
                    year: $(".task-year").val(),
                    importance: $(".task-importance").val(),
                    perform: "未完成",
                }
                $.ajax({
                    url: "/add",
                    method: "get",
                    data: {
                        newTasks: newTasks,
                    },
                    success: function(data) {
                        flLs.eq(0).trigger("click");
                        getTodolistData(data);
                    }
                })
            });

            var btnPri = $(".btn-pri");
            btnPri.on("click", function(e) {
                page--;
                if (page < 0) {
                    page = 0;
                    alert("已经是第一页");
                    return;
                }
                $.ajax({
                    url: "/getTodolistData",
                    method: "get",
                    data: {
                        page: page,
                        pageCount: pageCount
                    },
                    success: function(data) {
                        showData(data);
                    }
                })
            });
            var btnNext = $(".btn-next");
            btnNext.on("click", function(e) {
                console.log(page);
                console.log(totalPage);
                page++;
                if (page >= totalPage) {
                    page = totalPage - 1;
                    alert("已经是最后一页");
                    return;
                }
                $.ajax({
                    url: "/getTodolistData",
                    method: "get",
                    data: {
                        page: page,
                        pageCount: pageCount
                    },
                    success: function(data) {
                        showData(data);
                    }
                })
            });
            var btnPri1 = $(".btn-pri1");
            btnPri1.on("click", function(e) {
                page--;
                if (page < 0) {
                    page = 0;
                    alert("已经是第一页");
                    return;
                }
                $.ajax({
                    url: "/finish",
                    method: "get",
                    data: {
                        page: page,
                        pageCount: pageCount
                    },
                    success: function(data) {
                        showData2(data);
                    }
                })
            });
            var btnNext1 = $(".btn-next1");
            btnNext1.on("click", function(e) {
                console.log(page);
                console.log(totalPage);
                page++;
                if (page >= totalPage) {
                    page = totalPage - 1;
                    alert("已经是最后一页");
                    return;
                }
                $.ajax({
                    url: "/finish",
                    method: "get",
                    data: {
                        page: page,
                        pageCount: pageCount
                    },
                    success: function(data) {
                        showData2(data);
                    }
                })
            });

        })
    </script>

</body>

</html>